<template>
  <MenuAssignEditor ref="refAssignTree" :comment="props.comment" :expand-all="true"
                    :name="'菜单'" :blank-tip="blankTip" :load-asset-data="loadMenuData"
                    :load-hold-asset="loadHoldAsset" :load-hold-other-asset="loadHoldOtherAsset"
                    :entry="props.entry" :assign-assets="assignMenu" :product="props.product"
                    :readonly="props.readonly" :path="'/platform/assets/menus/'">
    <template v-slot:tail>
      <el-checkbox v-show="canShowAllMenu" v-model="showAllMenu" @change="showAllMenuChange">
        标记全部菜单
      </el-checkbox>
    </template>
  </MenuAssignEditor>
</template>

<script setup lang="ts">

import {computed, getCurrentInstance, nextTick, onMounted, onUnmounted, ref, toRaw} from "vue";
import {useLoadAssign} from "@/utils/sop/UseLoadAssign";
import {loadAssetLevel} from "@/apis/sop";
import {currentNames, TYPES} from "@/stores/conf";
import {useStore} from "@/stores";
import {handleLevelData} from "@/utils/SystemUtil";
import {refreshUserAssets} from "@/utils/sop/RoleUtil";
import MenuAssignEditor from "@/views/sop/assign/MenuAssignEditor.vue";

const store = useStore();
const refAssignTree = ref();
const showAllMenu = ref(true);
let otherOwnerMenu: any = [];

const props = withDefaults(defineProps<{
  entry: any,
  readonly?: boolean,
  comment?: string,
  product?: boolean,
}>(), {});

const blankTip = "当前平台还未分配任何菜单,请点击下方按钮分配菜单.";

const {proxy} = getCurrentInstance();
const {load, assign} = useLoadAssign(props.entry);

const canShowAllMenu = computed(() => {
  return props.entry.name == currentNames.PLAT_USER;
})

const getTargetId = () => {
  return '';
}

const productCode = () => {
  return refAssignTree?.value.getProductCode();
}

const refresh = async () => {
  await refAssignTree.value?.refresh();
}

const showAllMenuChange = () => {
  nextTick(() => refAssignTree.value?.refreshHoldOtherAsset());
}

const handleOtherOwnerMenu = (menus: any) => {
  if (menus)
    menus.forEach((item: any) => {
      if (item.brief && item.brief.ownerType == 2) {
        otherOwnerMenu.push(toRaw(item.brief));
      }
      if (item.children && item.children.length > 0) {
        handleOtherOwnerMenu(item.children);
      }
    });
}

const loadMenuData = async (params: any) => {
  otherOwnerMenu = [];
  const current: any = store.getCurrent(props.entry.name);
  if (props.entry.name == currentNames.PLAT_USER &&
      current.item.detail && current.item.detail.trees) {
    handleOtherOwnerMenu(current.item.detail.trees[TYPES.MENU]);
  }

  const platform: any = store.getCurrentPlatform();
  const result = await loadAssetLevel({
    server: props.entry.server,
    targetId: platform.id,
    assetType: TYPES.MENU,
    ...params,
    productCode: productCode(),
  });

  if (result && result.data) {
    const menuData: any = [];
    handleLevelData(menuData, result.data, []);
    delete result.data;
    result.data = menuData;
  }

  return result;
}

const loadHoldAsset = async () => {
  let holdItems = [];
  const selAssets = await load(getTargetId(), TYPES.MENU, {
    current: 1,
    pageSize: 9999,
    productCode: productCode(),
  });

  if (selAssets && selAssets.code === 0 && selAssets.data) {
    holdItems = toRaw(selAssets.data.data) || [];
  } else {
    holdItems = [];
  }

  return holdItems;
}

const loadHoldOtherAsset = async () => {
  return showAllMenu.value ? otherOwnerMenu : [];
}

const assignMenu = async (assets: any) => {
  const result: any = await assign(getTargetId(), TYPES.MENU, assets, productCode(), 1);
  if (props.entry.name == currentNames.ROLE) {
    setTimeout(async () => {
      await refreshUserAssets(currentNames.PLAT_USER);
      proxy.$bus.emit('roleChanged');
    }, 300);
  }
  return result;
}

onMounted(() => {
  if (props.entry.name == currentNames.PLAT_USER) {
    proxy.$bus.on('roleChanged', (data: any) => {
      refresh();
    });
  }
})

onUnmounted(() => {
  if (props.entry.name == currentNames.PLAT_USER) {
    proxy.$bus.off('roleChanged');
  }
})

defineExpose({
  refresh,
})

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

</style>
